import React from 'react';
import { inject, observer } from 'mobx-react';
import {Button,Icon,message,Tooltip,Modal} from 'antd'
import {WeaLocaleProvider,WeaRichText, WeaTools } from 'ecCom';
import NewLinkeb from '../../../public/newlinked/NewLinkeb';
import * as Util from '../../../util/Util';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
@inject('taskDetailStore')
@observer
export default class FeedInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ckeid: '',
            toolbar:
            [
                { name: 'document', items: ['Source'] },
                { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                { name: 'colors', items: ['TextColor'] },
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                { name: 'insert', items: ['Table', 'Smiley'] }
            ]
        }
    }
    componentWillMount() {//一些初始化请求
        this.setState({ckeid: '' });
    }
    onStatusChange(val){
        if(val=="ready"){
            const{taskDetailStore} = this.props;
            if(taskDetailStore.spinning){
                taskDetailStore.spinning = false;
            }
            if(taskDetailStore.isFb && this.refs.RichText){
                this.refs.RichText.focus();
                taskDetailStore.isFb = undefined;
            }
        }
    }
    //编辑修改内容回调taskMain.js
    doCallBack(type,dataArray,key,cstatus) {
        if (typeof this.props.doCallBack === "function") {
            this.props.doCallBack(type,dataArray,key,cstatus);
        }
    }
    //任务反馈 发布
    taskRelease() {
        const { taskDetailStore } = this.props;
        const{detailKey} = taskDetailStore;
        let _this = this;
        if (taskDetailStore.feedbackContent != '') {
            taskDetailStore.addTaskFbInfo({ taskId: detailKey, content: taskDetailStore.feedbackContent,doback:function(){
                _this.doCallBack("addfb");
            }});
        } else {
            Modal.warning({
                title: getLabel(558,'提示'),
                content: getLabel(508792,'反馈信息不能为空!'),
            });
        }
    }
    //设置feedBack 内容
    setfeedbackContent(v) {
        const { taskDetailStore } = this.props;
        taskDetailStore.feedbackContent = v;
    }
    //任务反馈 删除
    delFeedback(fbid, index) {
        const { taskDetailStore } = this.props;
        const{detailKey} = taskDetailStore;
        let _this = this;
        Modal.confirm({
            title: getLabel(131329,'信息确认'),
            content: getLabel(508791,'确认要删除此反馈吗？'),
            onOk() {
                taskDetailStore.taskOperation({ operation: 'delFbInfo', taskId: detailKey, fbid: fbid, index: index,doback:function(){
                    _this.doCallBack("addfb");
                } });
            },
            onCancel() { },
        });
    }
    //任务反馈加载更多
    onMoreFeedbackClick(pagesize) {
        const { taskDetailStore } = this.props;
        const{detailKey} = taskDetailStore;
        taskDetailStore.taskOperation({ operation: 'getFbInfo', taskId: detailKey, pagesize: pagesize, lastid: taskDetailStore.lastfeedbackid, lastcount: taskDetailStore.fblastcount });
    }
    //循环生成回复信息
    renderReply(replylist) {
        return replylist && replylist.length > 0 && replylist.map((ele, index1) => {
            return (<div className="task-Feedback-reply-list">
                <div className="reply-basis">
                    <span className="reply-name">@ <a href='javaScript:void(0)' onClick={e => { openhrm(ele.hrmid); window.pointerXY(e) }} title={ele.hrmname} >{ele.hrmname}</a></span>
                    <span className="reply-time">{ele.datetime}</span>
                </div>
                <div className="reply-contnet" dangerouslySetInnerHTML={{ __html: ele.content }} />
            </div>)
        })
    }
    //点击回复按钮触发
    replyFeedback(lastid, hrmid, datetime) {
        this.setState({ ckeid: lastid + "_" + hrmid + "_" + datetime + "_feedback" });
    }
    //提交回复
    submitReply(ckeId, lastid) {
        const { taskDetailStore } = this.props;
        const{detailKey} = taskDetailStore;
        if (this.refs[ckeId].getData().length > 0) {
            let _this = this;
            taskDetailStore.addTaskFbInfo({
                taskId: detailKey, content: this.refs[ckeId].getData(), replyid: lastid, doback: function (type) {
                    _this.setState({ ckeid: '' });
                    _this.doCallBack("addfb");
                }
            });
        } else {
            Modal.warning({
                title: getLabel(558,'提示'),
                content: getLabel(508790,'回复信息不能为空!'),
            });
        }
    }
    //取消提交回复
    cancelSubmitReply(ckeId) {
        // this.refs[ckeId].removeEditor();
        this.setState({ ckeid: '' });
    }
    
    render() {
        let { ckeid,toolbar} = this.state;
        const { taskDetailStore } = this.props;
        const { editParams, hasData,detailKey,iconArray,fblist, feedbackContent, fblastcount,category} = taskDetailStore;
        const bottomBarConfig =
            [
                {
                    name: 'Upload', // 上传组件
                    // type: 'list', // 上传组件类型
                    show: <span style={{ fontSize: 12 }}>
                        <i className='icon-coms-link' style={{marginRight:5}} title={getLabel(500574,'上传附件')} />{getLabel(156,'附件')}</span>,
                    uploadUrl: '/api/doc/upload/uploadFile2Doc?category=' + category, // 上传地址
                    category: category, // 文档目录
                },
                {
                    name: 'Browser', // 浏览按钮组件
                    show: <span style={{ fontSize: 12 }}>
                        <i className='icon-portal-doc' title={getLabel(58,'文档')} /> {getLabel(58,'文档')}</span>, // 使用组件库图标
                    type: '37', // 浏览按钮类型 文档
                    title: getLabel(58,'文档'), // 浏览按钮标题
                    icon:iconArray["docids"],
                },
                {
                    name: 'Browser', // 浏览按钮组件
                    show: <span style={{ fontSize: 12 }}>
                        <i className='icon-coms-Workflow-o' title={getLabel(131692,'流程')} /> {getLabel(131692,'流程')}</span>,
                    type: '152', // 浏览按钮类型
                    title: getLabel(131692,'流程'), // 浏览按钮标题
                    icon:iconArray["wfids"],
                },
                {
                    name: 'Browser',
                    show: <span style={{ fontSize: 12 }}>
                        <i className='icon-portal-crm' title={getLabel(136,'客户')} /> {getLabel(136,'客户')}</span>, // 使用组件库图标
                    type: '7',
                    title: getLabel(136,'客户'),
                    icon:iconArray["crmids"],
                },
                {
                    name: 'Browser',
                    show: <span style={{ fontSize: 12 }}>
                        <i className='icon-coms-project' title={getLabel(101,'项目')} />{getLabel(101,'项目')}</span>,
                    type: '8',
                    title: getLabel(101,'项目'),
                    icon:iconArray["projectids"],
                }
            ];
        return (
            <div>
                <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@4be3nx`} ref="RichText"
                            onChange={v => this.setfeedbackContent(v)}
                            value={feedbackContent}
                            ckConfig={{
                                toolbar: toolbar,
                                height: 80,
                                startupFocus: false,
                                autoGrow_minHeight: 80,
                                autoGrow_maxHeight: 80,
                            }}
                            bottomBarConfig={bottomBarConfig}
                            bottomBarRight={{
                                width: 100,
                                Component: [
                                    <span className="wea-rich-text-toolbar-bottom-item" style={{ position: "relative" }}>
                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4bu1on@submit`} className="wea-button-release" onClick={() => this.taskRelease()}>
                                            <span><span className="icon-coms-Release" /><span style={{ marginLeft: '2px' }}>{getLabel(615,'提交')}</span></span>
                                        </Button>
                                    </span>
                                ]
                            }}
                            onToolsChange={(name, ids, list, type) => Util.transfStr(name, ids, list, type,detailKey,2)}
                            onStatusChange={(val)=>this.onStatusChange(val)}
                        />
                 {fblist && fblist.length > 0 && fblist.map((elemnet, index) => {
                                            return <div>
                                                <div className="task-Feedback">
                                                    <div className="task-Feedback-left"><a href='javaScript:void(0)' onClick={e => { openhrm(elemnet.hrmid); window.pointerXY(e) }} title={elemnet.hrmname} ><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@5zsa0y@${elemnet.lastid}`} type="user" /></a></div>
                                                    <div className="task-Feedback-right wea-workrelate-remark-number">
                                                        <div className="task-Feedback-right-name"><a href='javaScript:void(0)' onClick={e => { openhrm(elemnet.hrmid); window.pointerXY(e) }} title={elemnet.hrmname} >{elemnet.hrmname}</a><span className="task-Feedback-last-time">{elemnet.datetime}</span>
                                                        {elemnet.isnew && <span title={getLabel(84048,'新反馈')} className="feedback-last-span-new">new</span>}
                                                        </div>
                                                        
                                                        <div className="task-Feedback-last">
                                                            <span className="task-Feedback-last-button">
                                                                {elemnet.hasdel ? <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@1y3nv6@${elemnet.lastid}`} title={getLabel(508783,'删除此评论')}><span className="last-button-i" onClick={() => this.delFeedback(elemnet.lastid, index)} ><i className="icon-coms-delete" />{getLabel(91,'删除')}</span></Tooltip>: ''}
                                                                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@v4u6dz@${elemnet.lastid}`} title={getLabel(508781,'回复此评论')}><span className="last-button-i" onClick={() => this.replyFeedback(elemnet.lastid, elemnet.hrmid, elemnet.datetime)}><i className="icon-coms-Advice" />{getLabel(18540,'回复')}</span></Tooltip>
                                                            </span>
                                                        </div>

                                                        <div className="task-Feedback-right-content" dangerouslySetInnerHTML={{ __html: elemnet.content }}></div>
                                                        <div className="task-Feedback-reply">
                                                            {this.renderReply(elemnet.replylist)}
                                                        </div>
                                                    </div>
                                                </div>
                                                {
                                                    ckeid == elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback' ? (
                                                        <div className="task-Feedback-reply">
                                                            <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@g4mplm@${elemnet.lastid}`}
                                                                ref={elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback'}
                                                                ckConfig={{
                                                                    toolbar: toolbar,
                                                                    height: 60,
                                                                    autoGrow_minHeight: 60,
                                                                    autoGrow_maxHeight: 60,
                                                                    startupFocus: false,
                                                                }}
                                                                bottomBarConfig={bottomBarConfig}
                                                                bottomBarRight={{
                                                                    Component: [
                                                                        <span className="wea-rich-text-toolbar-bottom-item" style={{ position: "relative" }}>
                                                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@am7flz@submit${elemnet.lastid}`} className="wea-button-release" style={{ marginRight: '18px' }}  onClick={() => this.submitReply(elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback', elemnet.lastid)}>
                                                                                <span><span>{getLabel(615,'提交')}</span></span>
                                                                            </Button>
                                                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2ol9ru@cancel${elemnet.lastid}`} className="wea-button-release" style={{ marginRight: '18px' }}  onClick={() => this.cancelSubmitReply(elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback')}>
                                                                                <span><span>{getLabel(201,'取消')}</span></span>
                                                                            </Button>
                                                                        </span>
                                                                    ]
                                                                }}
                                                                onToolsChange={(name, ids, list, type) => Util.transfStr(name, ids, list, type,detailKey,2)}
                                                            />
                                                        </div>) : <div />
                                                }
                                            </div>
                                        })
                                    }
                                    { fblist && fblist.length > 0 && (fblastcount > 0 ? <div className="tabs-Feedback-more" onClick={() => this.onMoreFeedbackClick()}>{getLabel(82720,'加载更多')} <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@sh6zr8`} type="down" /></div> : <div className="tabs-Feedback-split"></div>)}
            </div >
        )
    }
};